<template>
  <!-- 事件统计图 -->
  <StatisticalChart
    v-if="chartVisible"
    :changeChartVisible="changeChartVisible"
  />
  <!-- 点击事件查询后，显示 '停止查询' -->
  <el-dropdown class="dda" placement="top" popper-class="dropDownStyle">
    <span>事件查询</span>
    <template #dropdown>
      <el-dropdown-menu visible="false">
        <el-dropdown-item @click="drowGeometry" v-if="flag">
          开始查询
        </el-dropdown-item>
        <el-dropdown-item disabled v-else> 开始查询 </el-dropdown-item>
        <el-dropdown-item @click="removeDraw"> 停止查询 </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <!-- 事件查询对话框 -->
  <div class="eventsDialog">
    <el-dialog
      v-model="dialogTableVisible"
      title="Shipping address"
      draggable
      top="55vh"
      :modal="false"
      :show-close="false"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @open="handleOverlay"
      @close="querySource.clear()"
    >
      <template #header="{ close }">
        <div class="my-header">
          <div class="left">
            <!-- 生成事件热力图 -->
            <HeatMap @changeShow="handleQuerySource" />
            <el-button color="#337ab7" @click="handleClick">
              生成事件统计图
            </el-button>
          </div>
          <div class="right">
            <el-button
              class="arrow"
              @click="showTable = !showTable"
              color="#5bc0de"
            >
              <!-- 实现icon图标点击翻转 -->
              <i
                class="iconfont icon-linecar105"
                :style="
                  showTable
                    ? { transform: 'rotate(360deg)' }
                    : { transform: 'rotate(180deg)' }
                "
              ></i>
            </el-button>
            <el-button type="danger" @click="close" color="#5bc0de">
              <i class="iconfont icon-guanbi"></i>
            </el-button>
          </div>
        </div>
      </template>
      <div class="main" v-if="showTable">
        <el-table :data="showQueryEvents" height="270px" border>
          <el-table-column property="事件编号" label="事件编号" width="150" />
          <el-table-column property="事件类型" label="事件类型" />
          <el-table-column property="事件等级" label="事件等级" />
          <el-table-column property="发生时间" label="发生时间" width="160" />
          <el-table-column property="发生地点" label="发生地点" width="200" />
          <el-table-column property="车牌号" label="车牌号" />
          <el-table-column property="驾驶员" label="驾驶员" />
          <el-table-column property="处理状态" label="处理状态" />
        </el-table>
        <div class="paging">
          <el-pagination
            background
            :page-size="5"
            :pager-count="5"
            layout="prev, pager, next"
            :total="queryEvents.length"
            @current-change="changeTable"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { createDraw } from '../../../utils/createDraw';
import { Query } from '../../../utils/Query';
import markerUrl from '../../../img/dingwei.png';
import HeatMap from './HeatMap.vue';
import StatisticalChart from '../components/StatisticalChart.vue';

const $map = ref(null);
var querySource; //查询图层
var icon; //标注样式
var drawSource; //画布
var flag = ref(true); //渲染 '开始查询' 按钮
let dialogTableVisible = ref(false); //显示对话框
let showTable = ref(true); //显示事件列表
const queryFeatures = ref(null); //查询得到的ol要素
const queryEvents = ref([]); // 查询要素属性数组
const showQueryEvents = ref([]); //分页展示的数组

const chartVisible = ref(false);
const changeChartVisible = () => {
  chartVisible.value = false;
};

function handleClick() {
  chartVisible.value = true;
}

onMounted(() => {
  $map.value = inject('$map');

  // 查询结果图层
  // 标注
  icon = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 60],
      anchorOrigin: 'top-right',
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      offsetOrigin: 'top-right',
      scale: 0.5,
      src: markerUrl,
    }),
  });

  // source
  querySource = new ol.source.Vector({});
  // layer
  let pointLayer = new ol.layer.Vector({
    source: querySource,
  });
  $map.value.addLayer(pointLayer);

  //创建画布
  drawSource = new ol.source.Vector({});
  const layer = new ol.layer.Vector({
    source: drawSource,
  });
  $map.value.addLayer(layer);
});

//拉框查询
function drowGeometry() {
  flag.value = false;
  // 创建画笔
  let draw = createDraw({ type: 'Box', drawSource });
  $map.value.addInteraction(draw);
  // 绘制开始，清空画布
  draw.on('drawstart', () => {
    drawSource.clear();
    querySource.clear();
  });
  // 绘制结束，几何查询
  draw.on('drawend', (e) => {
    var geometry = e.feature.getGeometry();
    var service = {
      name: 'guanggu',
      layerId: 2,
    };
    Query.queryByGeom({
      geometry,
      service,
      callback: handleQuery,
    });
  });
}
// 几何查询回调
function handleQuery(data) {
  if (data.SFEleArray.length != 0) {
    //将要素转为ol要素类型
    var format = new Zondy.Format.PolygonJSON();
    queryFeatures.value = format.read(data);
    querySource.addFeatures(queryFeatures.value);
    //将要素转为标注
    querySource.forEachFeature((feature) => {
      feature.setStyle(icon);
    });

    // 填充查询事件属性数组
    queryEvents.value = [];
    querySource.getFeatures().forEach((item) => {
      queryEvents.value.push(item.values_.values_);
    });
    queryEvents.value.map((item) => {
      switch (item.事件等级) {
        case '1':
          item.事件等级 = '轻微事故';
          break;
        case '2':
          item.事件等级 = '一般事故';
          break;
        case '3':
          item.事件等级 = '重大事故';
          break;
        case '4':
          item.事件等级 = '特大事故';
          break;
      }
      switch (item.处理状态) {
        case '0':
          item.处理状态 = '待处理';
          break;
        case '1':
          item.处理状态 = '处理中';
          break;
        case '2':
          item.处理状态 = '已归档';
          break;
      }
    });
    //初始化当前页面展示的数组内容
    showQueryEvents.value = queryEvents.value.slice(0, 5);
    // 显示对话框
    dialogTableVisible.value = true;
  }
}

// 点击分页，定义渲染内容
function changeTable(page) {
  showQueryEvents.value = queryEvents.value.slice((page - 1) * 5, page * 5);
}

// 停止查询,清除画笔，清空数据
function removeDraw() {
  flag.value = true;
  drawSource.clear();
  querySource.clear();
  $map.value.getInteractions().pop();
  // 关闭查询对话框
  dialogTableVisible.value = false;
}

// 调整遮罩层
function handleOverlay() {
  //获取对话框
  var overlay = document.querySelector('.is-draggable');
  // 事件穿透
  overlay.style.pointerEvents = 'auto';
  var overlayFa = overlay.parentNode;
  overlayFa.style.pointerEvents = 'none';
  var overlayGfa = overlay.parentNode.parentNode;
  overlayGfa.style.pointerEvents = 'none';
}

// 点击 '生成事件热力图' 按钮，控制querySource显隐
function handleQuerySource(show) {
  if (show) {
    querySource.clear();
  } else {
    querySource.addFeatures(queryFeatures.value);
  }
}
</script>

<style lang="scss" scoped>
.eventsDialog {
  :deep(.el-dialog) {
    width: 65%;
  }

  :deep(.el-dialog__header) {
    border-top: 4px solid #1992f3;
    padding-bottom: 0px;
    margin-right: 0px;
    padding: 0;

    .el-button {
      color: #fff;
      padding: 7px 9px;
      margin: 3px;
    }
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }
}
</style>

<style lang="scss" scoped>
//'停止查询'下拉框
.el-dropdown {
  height: 100%;
  display: flex;
  align-items: center;
  color: #000;
  font-size: 16px;
  line-height: 22px;

  :deep(:focus-visible) {
    outline: none !important;
  }
}

// 对话框头部
.my-header {
  display: flex;
  justify-content: space-between;

  .icon-linecar105 {
    transition: 0.5s all;
  }

  .arrow {
    background-color: #5bc0de;
    border: none;
  }
}

.paging {
  display: flex;
  justify-content: end;
  padding: 6px;
}
</style>
